
<template>
    <div class="areaCode">
        <el-form-item prop="region">

            <el-select v-model="province" placeholder="请选择省" :clearable="provinceClear" @clear="resetValue(1)"
                :disabled="props.isDisabled">
                <el-option class="arriveClass" v-for="(item, index) in provinceListAll" :key="index"
                    :label="item.areaName" :value="item.areaCode">
                </el-option>
            </el-select>
            <el-select v-model="city" placeholder="请选择市" :clearable="cityClear" @clear="resetValue(2)"
                :disabled="props.isDisabled">
                <el-option class="arriveClass" v-for="(item, index) in cityList" :key="index" :label="item.areaName"
                    :value="item.areaCode">
                </el-option>
            </el-select>
            <el-select v-model="county" placeholder="请选择区县" :clearable="countyClear" @clear="resetValue(3)"
                :disabled="props.isDisabled">
                <el-option class="arriveClass" v-for="(item, index) in countyList" :key="index" :label="item.areaName"
                    :value="item.areaCode">
                </el-option>
            </el-select>
            <el-select v-model="town" placeholder="请选择镇" :clearable="townClear" @clear="resetValue(4)"
                :disabled="props.isDisabled">
                <el-option class="arriveClass" v-for="(item, index) in townList" :key="index" :label="item.areaName"
                    :value="item.areaCode">
                </el-option>
            </el-select>
            <el-select v-model="village" placeholder="请选择村" :clearable="villageClear" :disabled="props.isDisabled">
                <el-option class="arriveClass" v-for="(item, index) in villageList" :key="index" :label="item.areaName"
                    :value="item.areaCode">
                </el-option>
            </el-select>
        </el-form-item>
    </div>
</template>
<script setup name="areaItem">
import { ProvinceSelect } from "@/api/areacode";
const { proxy } = getCurrentInstance();
import useUserStore from '@/store/modules/user'
const store = useUserStore();
const isInit = ref(true)
const provinceClear = ref(true)
const cityClear = ref(true)
const countyClear = ref(true)
const townClear = ref(true)
const villageClear = ref(true)
const props = defineProps({
    isDisabled: {
        type: Boolean,
        default: true
    },
    areaCode: { type: String }
});
//console.log('isDisabled', props.isDisabled)
//console.log('store.userType', store.getters)
let data = reactive({
    province: '',  // 所属省（直辖市）
    city: '',     // 所属市
    county: '',
    town: '',
    village: '',
    provinceListAll: [],
    cityList: [],
    countyList: [],
    townList: [],
    villageList: [],
    belongAreaCode: '',
})
let { province, city, county, town, village, provinceListAll, cityList, countyList, townList, villageList, belongAreaCode } = toRefs(data);
let param = reactive({
    queryParams: {
        areaCode: '',
        selectAreaCode: ''
    }
})
belongAreaCode.value = store.areaCode
//belongAreaCode.value = 'A01A01A01A09'
//console.log('belongAreaCode.value', belongAreaCode.value)

//联动下拉获取文字抛出事件
function outputValue(areaCode) {
    if (areaCode == '') {
        areaCode = village.value
        if (village.value == '') {
            areaCode = town.value
        }
        if (town.value == '') {
            areaCode = county.value
        }
        if (county.value == '') {
            areaCode = city.value
        }
        if (city.value == '') {
            areaCode = province.value
        }

    }
    proxy.$emit('outValue', areaCode)
}
//清空
function clearValue() {
    data.province = ''
    data.city = ''
    // 县区code
    data.county = ''
    // 镇乡code
    data.town = ''
    // 村code
    data.village = ''
    if (belongAreaCode.value != null) {
        getCode(belongAreaCode.value)
        outputValue(belongAreaCode.value)
    }
}

//重置
function resetValue(level) {
    // console.log('level==', level)

    if (level < 1) {
        data.province = ''
    }
    if (data.city != '') {
        if (level < 2) {
            data.city = ''
        }
    } else {
        data.county = ""
        data.town = ''
        data.village = ''
    }
    if (data.county != '') {
        if (level < 3) {
            data.county = ''
        }
    } else {
        data.town = ''
        data.village = ''
    }
    if (data.town != '') {
        if (level < 4) {
            data.town = ''
        }
    } else {
        data.village = ''
    }
    if (data.village != '') {
        if (level < 5) {
            data.village = ''
        }
    }

}
//解析修改页面的areaCode
function getCode(areaCode) {
    isInit.value = true;
    resetValue(0)
    if (areaCode != '' && areaCode != undefined && areaCode != null) {
        let code = areaCode.length
        if (code > 2) {
            provinceClear.value = false
            data.province = areaCode.substring(0, 3)
        }
        if (code > 5) {
            cityClear.value = false
            data.city = areaCode.substring(0, 6)
        }
        if (code > 8) {
            countyClear.value = false
            data.county = areaCode.substring(0, 9)
        }
        if (code > 11) {
            townClear.value = false
            data.town = areaCode.substring(0, 12)
        }

        if (code > 14) {
            villageClear.value = false
            data.village = areaCode
        }

    } else {
        provinceClear.value = true;
        cityClear.value = true;
        countyClear.value = true
        townClear.value = true
        villageClear.value = true
    }

    proxy.$nextTick((_) => {
        isInit.value = false
    })
}
//获取省份
function getProvinceList() {
    param.queryParams.areaCode = ''
    param.queryParams.selectAreaCode = ''
    ProvinceSelect(param.queryParams, belongAreaCode.value).then(res => {
        // console.log('省份', res.data)
        if (res.code == 200) {
            provinceListAll.value = res.data
        }
    })

}
//获取市
function getCityList(code) {
    outputValue(code)
    param.queryParams.areaCode = code
    param.queryParams.selectAreaCode = data.city
    //console.log('city.selectAreaCode', param.queryParams.selectAreaCode)
    ProvinceSelect(param.queryParams, belongAreaCode.value).then(res => {
        //console.log('城市', res)
        cityList.value = res.data
    })
}
//获取县
function getCountryList(code) {
    outputValue(code)
    param.queryParams.areaCode = code
    param.queryParams.selectAreaCode = data.county;
    ProvinceSelect(param.queryParams, belongAreaCode.value).then(res => {
        // console.log('区', res)
        countyList.value = res.data
    })
}
//获取镇
function getTownList(code) {
    outputValue(code)
    param.queryParams.areaCode = code
    param.queryParams.selectAreaCode = data.town
    ProvinceSelect(param.queryParams, belongAreaCode.value).then(res => {
        // console.log('镇', res)
        townList.value = res.data
    })
}
//获取村
function getVillageList(code) {
    outputValue(code)
    param.queryParams.areaCode = code
    param.queryParams.selectAreaCode = data.village
    ProvinceSelect(param.queryParams, belongAreaCode.value).then(res => {
        // console.log('村', res)
        villageList.value = res.data
    })
}
watch(() => props.areaCode, () => {
    getCode(props.areaCode)
}, { deep: true, immediate: true });

watch(() => data.belongAreaCode, () => {
    if (belongAreaCode.value != null) {
        getCode(belongAreaCode.value)
    } else {
        getCode(props.areaCode)
    }
}, { deep: true, immediate: true });

watch(() => data.province, () => {
    // console.log('province', province.value)
    if (!isInit.value) {
        resetValue(1)
    }
    if (province.value != '') {
        getCityList(province.value)
    }
    if (province.value == '') {
        cityList.value = []
        outputValue('')
    }
}, { deep: true, immediate: true })
watch(() => data.city, () => {

    if (!isInit.value) {
        resetValue(2)
    }
    if (city.value != '') {
        getCountryList(city.value)
    }
    if (city.value == '') {
        countyList.value = []
        outputValue(province.value)
    }
}, { deep: true, immediate: true })
watch(() => data.county, () => {//县
    if (!isInit.value) {
        resetValue(3)
    }
    if (county.value != '') {
        getTownList(county.value)
    }
    if (county.value == '') {
        townList.value = []
        outputValue(city.value)
    }
}, { deep: true, immediate: true })
watch(() => data.town, () => {
    //  console.log('data.town====', town.value)
    if (!isInit.value) {
        resetValue(4)
    }
    if (town.value != '') {
        getVillageList(town.value)
    }
    if (town.value == '') {
        villageList.value = []
        outputValue(county.value)
    }
}, { deep: true, immediate: true })
watch(() => data.village, () => {
    if (!isInit.value) {
        resetValue(5)
    }
    if (village.value != '') {
        outputValue(village.value)

    }
    if (village.value == '') {
        outputValue(town.value)
    }
}, { deep: true, immediate: true })
onMounted(() => {
    getProvinceList()
    nextTick(() => {
        if (belongAreaCode.value != null) {
            getCode(belongAreaCode.value)
            outputValue(belongAreaCode.value)
        } else {
            getCode(props.areaCode)
        }
    })
})


defineExpose({
    clearValue
})
</script>
<style lang="scss" >
.areaCode {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-select {
        line-height: 34px;
        width: 140px;
        margin-right: 10px;

        input.el-input__inner {
            width: 140px !important;
        }
    }
}
</style>
